<!DOCTYPE html>
<html lang="en">
<head>
    <title>后台管理</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="favicon.ico">

    <!-- FontAwesome JS-->
    <script defer src="assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="assets/css/portal.css">

    <!--使用CDN方式引入jQuery类库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

</head>

<body class="app app-login p-0">
<div class="row g-0 app-auth-wrapper">
    <div class="col-12 col-md-7 col-lg-6 auth-main-col text-center p-5">
        <div class="d-flex flex-column align-content-end">
            <div class="app-auth-body mx-auto">
                <div class="app-auth-branding mb-4"></div>
                <h2 class="auth-heading text-center mb-5">白嫖电影后台管理</h2>
                <div class="auth-form-container text-start">
                    <form class="auth-form login-form">
                        <div class="email mb-3">
                            <label class="sr-only" for="identify">账号</label>
                            <input id="identify" name="identify" type="text" class="form-control signin-email"
                                   placeholder="请输入管理账号" required="required">
                        </div><!--//form-group-->
                        <div class="password mb-3">
                            <label class="sr-only" for="password">密码</label>
                            <input id="password" name="password" type="password" class="form-control signin-password"
                                   placeholder="请输入管理员密码" required="required">


                        </div><!--//form-group-->

                        <div class="randomcode mb-3">
                            <label class="sr-only" for="password">验证码</label>

                            <div class="extra mt-3 row">
                                <!--
                                <img style="width: 50%" src="assets/images/validate_code.png"/>
                                -->
                                <img id="randomCodeImg" style="width: 50%;cursor:pointer;"
                                     src="#"
                                     title="看不清楚，点击换一张" onclick="javascript:initRandomCodeImg();"/>

                            </div>
                            <input id="randomCode" name="randomcode" type="text" class="form-control signin-password"
                                   placeholder="请输入验证码" required="required">


                            <div class="extra mt-3 row justify-content-between">
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" checked id="rememberMe" type="checkbox" value="yes" />
                                        <label class="form-check-label"  for="rememberMe">
                                            记住我
                                        </label>
                                    </div>
                                </div><!--//col-6-->
                                <div class="col-6">
                                    <div class="forgot-password text-end">
                                        <a href="reset-password.html">忘记密码？</a>
                                    </div>
                                </div><!--//col-6-->
                            </div><!--//extra-->
                        </div>

                        <div class="text-center">
                            <button type="button" onclick="javascript: doLogin();"
                                    class="btn app-btn-primary w-100 theme-btn mx-auto">登录
                            </button>
                        </div>
                    </form>
                    <!--
                    <div class="auth-option text-center pt-5">No Account? Sign up <a class="text-link" href="signup.html" >here</a>.</div>
                    -->
                </div><!--//auth-form-container-->

            </div><!--//auth-body-->

            <footer class="app-auth-footer">
                <div class="container text-center py-3">
                    <small class="copyright"> <span class="sr-only">love</span><i class="fas fa-heart"
                                                                                  style="color: #fb866a;"></i> 作者：西蒙牛
                        <a class="app-link" target="_blank" href="../index.html" title="网页模板">返回网站首页</a>
                    </small>

                </div>
            </footer><!--//app-auth-footer-->
        </div><!--//flex-column-->
    </div><!--//auth-main-col-->
    <div class="col-12 col-md-5 col-lg-6 h-100 auth-background-col">
        <div class="auth-background-holder">
        </div>
        <div class="auth-background-mask"></div>
        <div class="auth-background-overlay p-3 p-lg-5">
            <div class="d-flex flex-column align-content-end h-100">
                <div class="h-100"></div>
                <div class="overlay-content p-3 p-lg-4 rounded">
                    <h5 class="mb-3 overlay-title">这个杀手不太冷</h5>
                    <div>
                        《这个杀手不太冷》（原题：Léon、英文译名：The
                        Professional）是由法国导演吕克·贝松编剧并执导的动作电影，由娜塔莉·波特曼、让·雷诺、加里·奥德曼联袂出演。该片于1994年9月14日在法国上映。讲述了一名职业杀手·莱昂无意间搭救了一名全家被杀害的叛逆女孩·玛蒂尔达，二人互生情愫的故事。该片获得1995年法国凯撒奖共7项提名与第19届日本学院奖最佳外语片的提名。
                    </div>
                </div>
            </div>
        </div><!--//auth-background-overlay-->
    </div><!--//auth-background-col-->


    <!--保存电影成功之后显示模态窗口-->
    <div class="modal faq-accordion" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel" style="color:#0f9d58">提示信息</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <span id="my-model-title"></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm" data-bs-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>
    <!--保存电影成功之后显示模态窗口结束-->

</div><!--//row-->

<!-- Javascript -->
<script src="assets/plugins/popper.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<script src="js/util/outils.min.js"></script>
<script src="js/api/baseUrl.js"></script>
<script src="js/api/users.js"></script>

<script type="module" defer>
    //这个类库用来生成前端的令牌
    //由于它是一个js的模块，必须写在一个带module的javascript脚本里面
    import {nanoid} from "./js/util/nanoid.js";

    let token = '';
    token = nanoid(16); //生成一个长度为16位的令牌
    window.sessionStorage.setItem("client-token", token);
    initRandomCodeImg();
</script>

<script>
    //window.onload = initRandomCodeImg();

    $.ajax({
        url: baseUrl + 'users/isLogin',
        type: 'GET',
        beforeSend: function (xhr) {
            //请求头部，添加会员卡的名字和会员卡的卡号。
            xhr.setRequestHeader('satoken', tokenValue);
        },
        dataType: 'json',
        success: resp => {
            if (resp.code === 200) {
                if (resp.data) {
                    console.log('当前用户已登录');
                    window.parent.location = 'index.html';
                    //isLogin = true;
                } else {
                    console.log('当前用户未登录....')
                    //这里能不直接页面去跳转呢？
                    //window.parent.location = 'login.html';
                    outils.removeCookie("movie-admin-token-name");
                    outils.removeCookie("movie-admin-token-value");
                    localStorage.removeItem("currentAdminUserInfo");
                }
            }
        }
    })


    function initRandomCodeImg(){
        //src  img
        let token =  window.sessionStorage.getItem("client-token");
        $("#randomCodeImg").prop("src", "http://192.168.5.23:8081/movie-admin/commons/randomcode?tm="+new Date().getTime()+"&token="+token);

    }

    function doLogin() {

        let identify = $("#identify").val();
        let password = $("#password").val();
        let randomCode = $("#randomCode").val();
        let token =  window.sessionStorage.getItem("client-token");
        let rememberme = 'no';
        if($("#rememberMe").prop("checked")){
            rememberme = $("#rememberMe").val();
        }

        //console.log("-----是否记住我----")
        //console.log(rememberme)


        login(identify, password,randomCode,token,rememberme).then(resp => {
            if(resp.code === 200){

                //window.location.href='index.html'
                //把会员卡号保存到cookie中。怎么存。
                if(rememberme === 'yes') {
                    outils.setCookie("movie-admin-token-name", resp.data.tokenName, 100); //默认保存100天
                    outils.setCookie("movie-admin-token-value", resp.data.tokenValue, 100);
                }else{
                    sessionStorage.setItem("movie-admin-token-name",resp.data.tokenName);
                    sessionStorage.setItem("movie-admin-token-value",resp.data.tokenValue);
                }
                localStorage.setItem("currentAdminUserInfo", JSON.stringify(resp.data));

                setTimeout('window.location.href="index.html"', 1000);

            }else{
                $("#exampleModal").modal("show"); //显示模态窗口
                $("#my-model-title").text(resp.msg);
            }
        })
    }
</script>
</body>
</html> 

